import React from 'react';
import ReactDOM from 'react-dom';
import Button from "../../../../node_modules/react-bootstrap/lib/Button";
import HttpRequest from './../HttpRequest.js';
import dialogManager from './../dialogManager.jsx';
import Modal from "../../../../node_modules/react-bootstrap/lib/Modal";
import Input from '../../../../node_modules/react-bootstrap/lib/Input';
import Checkbox from '../component/formElement/Checkbox.jsx';

/**
 * 判断用户存不存在
 * 判断用户是否已经是成员
 * 添加失败时提示
 * 不应该用userName 而是Id
 */

//var user_info = {};
let AddMemberDlg = React.createClass({
    getInitialState: function () {
        return {
            open: false,
            current_project: '',
            user_info: {}
        }
    },
    handleCompleted: function () {
        if (this.state.user_info.shortid) {
            var data = {
                'projectId': this.state.current_project._id,
                'user': this.state.user_info.shortid,
                'role': this.refs.role.getValue()
            };

            this.props.addMember(data,this.state.user_info,this.refs['create_workspace'].isChecked());
            this.setState({
                open: false,
                user_info: {}
            });

        } else {
            toastr.warning(null, "用户不存在!",{timeOut: 0});
        }
    },
    componentDidUpdate(){
        let inputDom;
        let nameInputRef = this.refs["userName"];
        if (nameInputRef) {
            inputDom = ReactDOM.findDOMNode(nameInputRef);
        }
        if (inputDom) {
            inputDom.childNodes[1].focus();
        }
    },

    getUserMatched: function () {
        var name = this.refs.userName.getValue();
        var that = this;
        if (name.length > 0) {
            HttpRequest.searchUsers(name).success(function (resp) {
                if (resp.code == 0) {
                    let data = resp.data;
                    data.map(function (user) {
                        user['value'] = user.loginname;
                        user['label'] = user.loginname;
                        if (user.usertype == "LOCAL") {
                            user["icon"] = '<span></span>';
                        } else if (user.usertype == "GITHUB") {
                            user["icon"] = '<span style="width: 23px;height: 23px;display: inline-block;float:right;color: #286090"> <i class="fa fa-github-square" style="font-size:24px"/></span>';
                        }
                    });
                    $("#userName").autocomplete({
                            minLength: 0,
                            source: data,
                            focus: function (event, ui) {
                                $("#userName").val(ui.item.loginname);
                                that.setState({user_info: ui.item})
                            },
                            select: function (event, ui) {
                                that.setState({user_info: ui.item})

                            }
                        })
                        .data("ui-autocomplete")._renderItem = function (ul, item) {
                        return $("<li>")
                            .append("<a>" + item.loginname + item.icon + "</a>")
                            .appendTo(ul);
                    };
                }
            }).error()
        }


    },
    handleOpen: function (current_project) {
        this.setState({
            open: true,
            current_project: current_project
        });
    },

    handleClose: function () {
        this.setState({open: false});
    },
    render() {
        return (
            <div>
                <Modal
                    show={this.state.open}
                >
                    <Modal.Header>
                        <Modal.Title >添加成员</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Input type="text" ref="userName" label="用户" id="userName" onChange={this.getUserMatched}/><p/>
                        <Input type="select" ref="role" label="角色">
                            <option value="developer">开发者</option>
                            <option value="admin">管理员</option>
                            <option value="observer">观察者</option>
                        </Input><p/>
                        <Checkbox label="是否创建工作空间" ref="create_workspace" isChecked = 'true'/>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button onClick={this.handleClose}
                                style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
                                bsStyle="primary">取消</Button>
                        <Button onClick={this.handleCompleted}
                                style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
                                bsStyle="primary" disabled={this.state.is_validated}>完成</Button>
                    </Modal.Footer>
                </Modal>

            </div>
        );
    }
});
dialogManager.addDialog("add_member_dialog", AddMemberDlg);
module.exports = AddMemberDlg;